@use "../tailwind-config"
/*********************************************************/
.#{tailwind-config.$prefix}text-xs
    font-size: x-small
.#{tailwind-config.$prefix}text-md
    font-size: medium
.#{tailwind-config.$prefix}text-lg
    font-size: large
/*********************************************************/
.#{tailwind-config.$prefix}text-center
    text-align: center
/*********************************************************/
.#{tailwind-config.$prefix}text-nowrap
    white-space: nowrap
/*********************************************************/
.#{tailwind-config.$prefix}text-ellipsis
    text-overflow: ellipsis
    overflow: hidden
/*********************************************************/
$colors: (
  "red":     #ef4444,
  "green":   #10b981,
  "blue":    #3b82f6,
  "yellow":  #f59e0b,
  "purple":  #8b5cf6,
  "pink":    #ec4899,
  "indigo":  #6366f1,
  "cyan":    #06b6d4,
  "orange":  #f97316,
  /*  grey   */
  "gray-100": #f3f4f6,
  "gray-400": #9ca3af,
  "gray-700": #374151,
  "gray-900": #111827 
)
    
@each $name, $color in $colors
    .#{tailwind-config.$prefix}text-#{$name}
        color: $color
